<template>
	<view>
		<view class="content_top">
			<view><image src="../../static/texts.jpg" mode="widthFix"></image></view>
			<view>
				<text>电工施工安全</text>
				<text>30.00元</text>
			</view>
		</view>
		<view class="real_payment">
			<text>实付款:</text>
			<text>30.00元</text>
		</view>
		<view class="pay_title">请选择支付方式</view>
		<view class="pay_item">
			 <radio-group @change="radioChange">
				<block v-for="(item,index) in list" :key="index">
					<view class="raido_item">
						<view>
							<veiw><image src="../../static/img/aboutUs.png" mode="widthFix" style="width: 80rpx;"></image></veiw>
							<veiw style="font-size: 30rpx;padding-left: 50rpx;">{{item.name}}</veiw>
						</view>
						<veiw style="text-align: right;"><radio :value="item.name" :checked="index === current" /></veiw>
					</view>
				</block>
			 </radio-group>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			list: [
				{
					name: '支付宝支付',
					img:'../../static/img/aboutUs.png',
					disabled: false
				},
				{
					name: '微信支付',
					img:'../../static/img/aboutUs.png',
					disabled: false
				},
			]
		};
	},
	methods: {}
};
</script>

<style lang="scss" scoped>
.content_top {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 30rpx 20rpx;
	border-bottom: 1rpx solid #e2e2e2;
	> view {
		flex: 1;
		&:nth-child(1) {
			> image {
				width: 90%;
			}
		}
		&:nth-child(2) {
			display: flex;
			flex-flow: column;
			color: #7d7d7d;
			font-size: 30rpx;
			> text {
				&:nth-child(2) {
					color: #d8875f;
					&::before {
						content: '￥';
						color: '#d8875f';
					}
				}
			}
		}
	}
}
.real_payment {
	padding: 30rpx 20rpx;
	display: flex;
	align-items: center;
	> text {
		&:nth-child(1) {
			font-size: 30rpx;
			color: #d6d6d6;
		}
		&:nth-child(2) {
			font-size: 40rpx;
			color: #d8875f;
			margin-left: 30rpx;
			&::before {
				content: '￥';
				color: '#d8875f';
			}
		}
	}
}
.pay_title {
	background: #f0f0f0;
	padding: 20rpx;
	color: #b1b1b1;
	font-size: 30rpx;
}
.raido_item{
	display: flex;
	align-items: center;
	padding: 20rpx;
	justify-content: space-between;
	border-bottom: 1rpx solid #EEEEEE;
	>view{
		&:nth-child(1){
			display: flex;
			align-items: center;
		}
	}
}
</style>
